<template>
	<view class="list">
		<u-empty
		v-if="state.datalist.length<1"
		        
		       
		>
		</u-empty>
		<view class="item ss-flex" v-for="(i,index) in state.datalist">
			<view class="left ">
				<view class="title">
					{{i.title}}
				</view>
				<view class="id">
					{{i.id}}
				</view>
			</view>
			<view class="ll">
				浏览：{{i.pv}}人
			</view>
			<image src="/static/stared.png" mode="" class="star" @tap="collect(i.id,index)"></image>
		</view>
	</view>
</template>

<script setup>
import LC from '@/LC';

	import {
		computed,
		reactive,
		ref,
		onMounted,
		getCurrentInstance,
		nextTick
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	let state=reactive({
		pageData:{
			page: 1,
			limit:15,
			status: 'loading'
		},
		showqrcode:false,
		keyword:'',
		tabindex:0,
		
		datalist:[]
	})
	
	onLoad(() => {
	
	
		// if (!LC.$store('user').isLogin) {
		// 	uni.reLaunch({
		// 		url: '/pages/auth/login'
		// 	})
		// }
	
		getlist()
	})
	
	function collect(id,index) {
	
	
		LC.$api.home.articlecollect({
				id: id
			})
			.then((res) => {
				if(res.code===1){
					state.datalist.splice(index,1)
				}
			})
	
	}
	
	
	function getlist() {
	
		LC.$api.user.mycollect({
				...state.pageData,
				
			})
			.then(({
				res,
				data
			}) => {
	
	
				state.datalist = [...state.datalist, ...data.data]
				
				if (data.data.length < state.pageData.limit) {
					state.pageData.status = 'nomore'
					return
				}
	
	
				state.pageData.status = 'loadmore'
				state.pageData.page += 1
	
			})
	
	}
	onReachBottom(() => {
		onbottom()
	})
	
	
	
	function onbottom() {
	
		let {
			status,
			load,
			limit,
			page
		} = state.pageData
	
		if (status != 'nomore' && !load) {
	
			getlist()
	
	
		}
	}

</script>

<style lang="scss">
	.item{
		margin-top: 32rpx;
		    padding: 34rpx 30rpx;
		  
		    background: #fff;
		    box-shadow: 0px 0px 8rpx 0px rgba(23, 143, 255, .17);
		    border-radius: 14rpx;
			.star {
				margin-left: auto;
				width: 54rpx;
				height: 54rpx;
			}
	}
	.left{
		width: 220rpx;
		text-align: center;
		    font-size: 36rpx;
		    font-weight: 600;
		    color: #022853;
			
		    border-right: 2rpx solid #999;
		.title{
		
		}
		.id{
			    font-size: 22rpx;
			    font-weight: 400;
			    color: #999;
			    margin-top: 14rpx
			   
		}
	}
.ll {
				background-color: rgba(35, 154, 255, .1);
				border-radius: 16rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #005aff;
				height: 36rpx;
				margin-left: 30rpx;
				padding: 0 20rpx;
			}

			.time {
				margin-left: 30rpx;
				width: 60%;
				font-size: 22rpx;
				font-weight: 400;
				color: #999;
			}

			
</style>
